<template>
  <div class="center-sql-box">
    <div class="header">
      <div class="title">数据中心库图</div>
      <div class="tool" @click="goToWaterBallPage">
        {{ $store.state.fullScreenStatus["centerSql"] ? "返回主页" : "全屏" }}
      </div>
    </div>
    <div class="center-sql" ref="center-sql">我是水球图</div>
  </div>
</template>

<script>
/*
 *@Date: 2023-11-15 09:39:24
 *@Description: 模块描述
 */
import { mapMutations } from "vuex"
import "@/utils/echarts-wordcloud.min.js"
export default {
  name: "",
  data() {
    return {
      myCharts: null,
    }
  },
  created() {},
  mounted() {
    this.initEcharts()
    window.addEventListener("resize", this.screenUpdate)
  },
  destroyed() {
    this.myCharts.dispose()
    this.myCharts = null
    window.removeEventListener("resize", this.screenUpdate())
  },
  methods: {
    ...mapMutations([
      //使用es6的拓展运算符
      "changeFullScreenStatus",
    ]),
    // 初始化图表
    initEcharts() {
      const centerSql = document.querySelector(".center-sql")
      this.myCharts = this.$echarts.init(centerSql)
      var data = [
        {
          name: "数据中心",
          symbol:
            "image://",
          symbolSize: [this.$fitChartFont(250), this.$fitChartFont(150)],
          value: [this.$fitChartFont(200), this.$fitChartFont(200)],
          x: this.$fitChartFont(50),
          y: this.$fitChartFont(40),
        },
        {
          name: "分数据中心一",
          x: this.$fitChartFont(400),
          y: this.$fitChartFont(400),
          value: [this.$fitChartFont(400), this.$fitChartFont(400)],
          symbol:
            "image://",
          symbolSize: [this.$fitChartFont(80), this.$fitChartFont(80)],
        },
        {
          name: "分数据中心二",
          x: this.$fitChartFont(400),
          y: this.$fitChartFont(400),
          value: [this.$fitChartFont(10), this.$fitChartFont(380)],
          symbol:
            "image://",
          symbolSize: [this.$fitChartFont(80), this.$fitChartFont(80)],
        },
        {
          name: "分数据中心三",
          x: this.$fitChartFont(400),
          y: this.$fitChartFont(400),
          value: [this.$fitChartFont(10), this.$fitChartFont(10)],
          symbol:
            "image://",
          symbolSize: [this.$fitChartFont(80), this.$fitChartFont(80)],
        },
        {
          name: "分数据中心四",
          x: this.$fitChartFont(400),
          y: this.$fitChartFont(400),
          value: [this.$fitChartFont(400), 0],
          symbol:
            "image://",
          symbolSize: [this.$fitChartFont(80), this.$fitChartFont(80)],
        },
      ]

      const option = {
        // backgroundColor: "#000",
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: {
          show: false,
          type: "value",
        },
        tooltip: {
          show: false,
        },
        series: [
          {
            type: "graph",
            zlevel: this.$fitChartFont(5),
            draggable: false,
            coordinateSystem: "cartesian2d", //使用二维的直角坐标系（也称笛卡尔坐标系）
            label: {
              normal: {
                show: false,
              },
            },
            data: data,
            links: [
              {
                source: "数据中心",
                target: "分数据中心一",
              },
              {
                source: "数据中心",
                target: "分数据中心二",
              },
              {
                source: "数据中心",
                target: "分数据中心三",
              },
              {
                source: "数据中心",
                target: "分数据中心四",
              },
            ],
            lineStyle: {
              normal: {
                opacity: 1,
                color: "#53B5EA",
                curveness: this.$fitChartFont(0.2),
                width: this.$fitChartFont(2),
              },
            },
          },
          {
            type: "lines",
            coordinateSystem: "cartesian2d",
            z: 1,
            zlevel: this.$fitChartFont(2),
            animation: false,
            effect: {
              show: true,
              period: this.$fitChartFont(8),
              trailLength: this.$fitChartFont(0.01),
              symbolSize: this.$fitChartFont(12),
              symbol: "pin",
              loop: true,
              color: "rgba(55,155,255,0.5)",
            },
            lineStyle: {
              normal: {
                color: "#22AC38",
                width: 0,
                curveness: this.$fitChartFont(0.2),
              },
            },

            data: [
              {
                coords: [
                  [this.$fitChartFont(200), this.$fitChartFont(200)],
                  [this.$fitChartFont(400), this.$fitChartFont(400)],
                ],
              },
              {
                coords: [
                  [this.$fitChartFont(200), this.$fitChartFont(200)],
                  [this.$fitChartFont(10), this.$fitChartFont(380)],
                ],
              },
              {
                coords: [
                  [this.$fitChartFont(200), this.$fitChartFont(200)],
                  [this.$fitChartFont(10), this.$fitChartFont(10)],
                ],
              },
              {
                coords: [
                  [this.$fitChartFont(200), this.$fitChartFont(200)],
                  [this.$fitChartFont(400), 0],
                ],
              },
            ],
          },
        ],
      }

      if (this.myCharts) {
        this.myCharts.setOption(option)
      }
    },
    // 图表socket数据更新
    updateData() {
      // const option = {
      // }
      // this.myCharts.setOption(option)
      // this.myCharts.resize()
    },
    // 视口大小改变时，图表渲染
    screenUpdate() {
      var data = [
        {
          name: "数据中心",
          symbol:
            "image://",
          symbolSize: [this.$fitChartFont(250), this.$fitChartFont(150)],
          value: [this.$fitChartFont(200), this.$fitChartFont(200)],
          x: this.$fitChartFont(50),
          y: this.$fitChartFont(40),
        },
        {
          name: "分数据中心一",
          x: this.$fitChartFont(400),
          y: this.$fitChartFont(400),
          value: [this.$fitChartFont(400), this.$fitChartFont(400)],
          symbol:
            "image://",
          symbolSize: [this.$fitChartFont(80), this.$fitChartFont(80)],
        },
        {
          name: "分数据中心二",
          x: this.$fitChartFont(400),
          y: this.$fitChartFont(400),
          value: [this.$fitChartFont(10), this.$fitChartFont(380)],
          symbol:
            "image://",
          symbolSize: [this.$fitChartFont(80), this.$fitChartFont(80)],
        },
        {
          name: "分数据中心三",
          x: this.$fitChartFont(400),
          y: this.$fitChartFont(400),
          value: [this.$fitChartFont(10), this.$fitChartFont(10)],
          symbol:
            "image://",
          symbolSize: [this.$fitChartFont(80), this.$fitChartFont(80)],
        },
        {
          name: "分数据中心四",
          x: this.$fitChartFont(400),
          y: this.$fitChartFont(400),
          value: [this.$fitChartFont(400), 0],
          symbol:
            "image://",
          symbolSize: [this.$fitChartFont(80), this.$fitChartFont(80)],
        },
      ]

      const option = {
        // backgroundColor: "#000",
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: {
          show: false,
          type: "value",
        },
        tooltip: {
          show: false,
        },
        series: [
          {
            type: "graph",
            zlevel: this.$fitChartFont(5),
            draggable: false,
            coordinateSystem: "cartesian2d", //使用二维的直角坐标系（也称笛卡尔坐标系）
            label: {
              normal: {
                show: false,
              },
            },
            data: data,
            links: [
              {
                source: "数据中心",
                target: "分数据中心一",
              },
              {
                source: "数据中心",
                target: "分数据中心二",
              },
              {
                source: "数据中心",
                target: "分数据中心三",
              },
              {
                source: "数据中心",
                target: "分数据中心四",
              },
            ],
            lineStyle: {
              normal: {
                opacity: 1,
                color: "#53B5EA",
                curveness: this.$fitChartFont(0.2),
                width: this.$fitChartFont(2),
              },
            },
          },
          {
            type: "lines",
            coordinateSystem: "cartesian2d",
            z: 1,
            zlevel: this.$fitChartFont(2),
            animation: false,
            effect: {
              show: true,
              period: this.$fitChartFont(8),
              trailLength: this.$fitChartFont(0.01),
              symbolSize: this.$fitChartFont(12),
              symbol: "pin",
              loop: true,
              color: "rgba(55,155,255,0.5)",
            },
            lineStyle: {
              normal: {
                color: "#22AC38",
                width: 0,
                curveness: this.$fitChartFont(0.2),
              },
            },

            data: [
              {
                coords: [
                  [this.$fitChartFont(200), this.$fitChartFont(200)],
                  [this.$fitChartFont(400), this.$fitChartFont(400)],
                ],
              },
              {
                coords: [
                  [this.$fitChartFont(200), this.$fitChartFont(200)],
                  [this.$fitChartFont(10), this.$fitChartFont(380)],
                ],
              },
              {
                coords: [
                  [this.$fitChartFont(200), this.$fitChartFont(200)],
                  [this.$fitChartFont(10), this.$fitChartFont(10)],
                ],
              },
              {
                coords: [
                  [this.$fitChartFont(200), this.$fitChartFont(200)],
                  [this.$fitChartFont(400), 0],
                ],
              },
            ],
          },
        ],
      }
      if (this.myCharts) {
        this.myCharts.setOption(option)
        this.myCharts.resize()
      }
    },
    goToWaterBallPage() {
      if (!this.$store.state.fullScreenStatus.centerSql) {
        this.$router.push("/centerSqlPage")
        this.changeFullScreenStatus({ type: "centerSql", value: true })
      } else {
        this.$router.back(1)
        this.changeFullScreenStatus({ type: "centerSql", value: false })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.center-sql,
.center-sql-box {
  width: 100%;
  height: 100%;
  position: relative;
  .header {
    position: absolute;
    width: 100%;
    padding: vw(5);
    z-index: 9;
    display: flex;
    justify-content: space-between;
    .title {
      color: white;
      font-size: vw(20);
    }
    .tool {
      cursor: pointer;
      color: white;
      font-size: vw(20);
    }
  }
}
</style>

